import React from "react";
import {Alert, Carousel, Col, Divider, Image, Row} from "antd";
import {BodyContent, DescriptionContainer, ImageContainer, RightContent} from "@/common/container/gameContainer/style";
import PropTypes from "prop-types";
import JComment from "@/common/Comment";
import {successMsg} from "@/util/global";
import {addComment, getGameComment} from "@/api/JustGameComment";

class Body extends React.Component {
    constructor(props) {
        super(props);
        this.saveComment = this.saveComment.bind(this);
        this.getCommentList = this.getCommentList.bind(this);
        this.replyComment = this.replyComment.bind(this);
        this.state = {
            gameId: this.props.data.id,
            comment: [],
        }
    }


    componentDidMount() {
        /* 加载数据评论 */

    }

    replyComment(value) {
        let data = {
            ...value,
            gameId: this.props.data.id
        }
        addComment(data).then(res => {
            if (res.success) {
                successMsg("发布成功!");
            }
        })
    }

    /* 发布评论 */
    saveComment(value) {
        let data = {
            ...value,
            gameId: this.props.data.id
        }
        addComment(data).then(res => {
            if (res.success) {
                successMsg("发布成功!");
            }
        })
    }

    getCommentList(value) {
        let data = {
            gameId: this.props.data.id,
            page: value.page,
            size: value.size,
        };
        getGameComment(data).then(res => {
            if (res.success) {
                this.setState({
                    comment: res.data
                })
            }
        })
    }

    render() {
        const {data} = this.props;
        return <>
            <BodyContent>
                {
                    data.photos.length > 0 ?
                        <>
                            <Divider orientation="left" className={'title'} plain>
                                <span>游戏截图</span>
                            </Divider>
                            <ImageContainer>
                                <Carousel
                                    autoplay
                                    draggable={true}
                                    style={{userSelect: 'none', width: '75%'}}
                                    effect="fade"
                                    autoplaySpeed={5000}>
                                    {
                                        data.photos.map(photo => {
                                            return <Image alt={"暂无图片"}
                                                          preview={false}
                                                          width={'100%'}
                                                          height={'auto'}
                                                          key={photo}
                                                          src={photo}/>
                                        })
                                    }
                                </Carousel>
                            </ImageContainer>
                        </> : null
                }
                <Row gutter={[16, 16]}>
                    <Col span={24}>
                        <Divider orientation="left" className={'title'} plain>
                            <span>游戏介绍</span>
                        </Divider>
                        <DescriptionContainer dangerouslySetInnerHTML={{__html: data.description}}/>
                    </Col>
                    <Col span={24}>
                        <Alert
                            banner
                            closable
                            style={{float: 'left', width: '100%'}}
                            description="若本站中存在侵犯了您既有版权或利益的内容，请发邮件至1217537393@qq.com，相关问题会尽快处理！"
                            type="info"
                            showIcon
                            message={""}/>
                    </Col>
                    <Col span={24}>
                        <Divider orientation="left" className={'title'} plain>
                            <span>游戏评论</span>
                        </Divider>
                        <JComment data={this.state.comment}
                                  onSave={this.saveComment}
                                  onLoad={this.getCommentList}
                                  onReply={this.replyComment}
                        />
                    </Col>
                </Row>

            </BodyContent>
            <RightContent>
                1
            </RightContent>
        </>
    }
}

Body.propTypes = {
    data: PropTypes.object,
    commentData: PropTypes.array
}
export default Body;
